<script setup>
import surfacePublic from './surface-public/index.vue'
import surfaceBase from './surface-base/index.vue'
import surfaceTechnical from './surface-technical/index.vue'
import Declaration from "../../components/Declaration.vue";
import Skeleton from "../../components/Skeleton.vue";
import {reactive, ref, onMounted} from 'vue'

import {useRouter} from 'vue-router';
const router = useRouter()
import {sleep} from '../../utils/util.js'

const onClickLeft = () => history.back();
const active = ref(0);
const checked = ref(false)
const visibleDebug = ref(true)
const skeleton = ref(true)
const goHistory = () => {
  router.push('/avoid-risk')
}
onMounted(async () => {
  await sleep(600)
  skeleton.value = false;
})
</script>

<template>
  <Skeleton v-if="skeleton" :row="15" pos="center"/>
  <div v-else class="app-container">
    <van-sticky>
      <van-nav-bar
          title="振华科技(000733)"
          left-arrow @click-left="onClickLeft"
      >
        <template #left>
          <img src="@/assets/images/icon_btn_back_black@3x.png" width="16" height="16" alt="">
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="statis" v-if="visibleDebug">
      <div class="statis__item">
        <div class="statis__label">
          8项风险(共扫描61项)
        </div>
        <div class="statis__contt">
          危险等级
        </div>
      </div>
      <div class="matter-container">
        <div class="matter">
          <div class="matter__dep">
            <p>
              公告风险、公募减持、限售解禁、高管异常变动、信息披露造假、诉讼风险、交易所问询、质押风险
            </p>
          </div>
        </div>
        <div class="matter">
          <div class="matter__dep">
            <p>
              05月14日起风险等级由警惕上升至危险，在历史上该股票发出危险预警后1月内，该股票下跌超5%的概率为40.00%，最大跌幅为
              -16.40%。
              <span class="checkbtn" @click="goHistory">查看历史避险表现</span>
            </p>
          </div>
        </div>
      </div>
      <div class="statis__item">
        <div class="statis__label">
          个股风险项目
        </div>
        <div class="statis__contt">
          <van-checkbox v-model="checked" icon-size="16px">隐藏无明显异常</van-checkbox>
        </div>
      </div>
    </div>
    <van-tabs v-model:active="active" sticky scrollspy offset-top="46px">
      <!--      <div style="height: 16px"></div>-->
      <van-tab title="舆情面">
        <div class="divideLine">舆情面（10）</div>
        <surfacePublic v-if="visibleDebug"/>
      </van-tab>
      <van-tab title="基本面">
        <div class="divideLine">基本面（10）</div>
        <surfaceBase/>
      </van-tab>
      <van-tab title="技术面">
        <div class="divideLine">技术面（10）</div>
        <surfaceTechnical/>
      </van-tab>
    </van-tabs>
  </div>
  <Declaration/>
</template>

<style lang="scss">
.mtable,
.mt-12 {
  margin-top: 12px;
}

.tableCard {
  padding: 0 16px;
}

/*common css*/
.check-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;

  span {
    color: rgba(108, 110, 122, 1);
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
  }
}

.secondInnerTabs {
  .van-collapse-item__title,
  .van-collapse-item__content {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.stepContainer {
  h3 {
    color: rgba(108, 110, 122, 1);
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
  }
}

.matter {
  //padding: 16px 16px 0 16px;
  .matter__tit {
    color: #000;
    font-family: PingFangSC-Medium;
    font-weight: 450;
    font-size: 14px;
    line-height: 18px;
  }

  .matter__dep {
    margin-top: 6px;

    p {
      color: rgba(108, 110, 122, 1);
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 12px;
      line-height: 17px;

      span.checkbtn {
        color: blue;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.app-container {
  //background: #f5f6fa;
  min-height: calc(100vh - 220px);
}

.matter-container {
  background: #F2F2F2;
  padding: 8px;
  border-radius: 10px;
  margin: 5px 0 10px;
}

.statis {
  padding: 10px 16px;

  .statis__item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .statis__label {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
    }

    .statis__contt {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
    }
  }
}

.divideLine {
  padding-left: 10px;
  color: rgba(108, 110, 122, 1);
  font-family: PingFangSC-Regular;
  //font-weight: 400;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  background: #7E86FF;
  margin: 16px;
  color: #fff;
  border-radius: 5px;
  opacity: 0.6;
}


</style>